<template>
<div id="app">
    <textarea :value="input" @input="update"></textarea>
    <div class="markdown-body" v-html="compiledMarked"></div>
    <div class="markdown-body" v-html="compiledCode"></div>
</div>
</template>
<script>

var rmarked = require("../index.js")
export default {
    data() {
        return {
            input:'# hello'
        }
    },
    methods:{
        update(e){
            let self = this
            clearTimeout(self.last)
            self.last = setTimeout(function(){ 
                self.input = e.target.value 
            },500)

        }
    },
    mounted(){
        this.input = MARKDOWN
    },
    computed:{
        compiledMarked(){
            let self = this
            return rmarked.render.call(rmarked,self.input)
        },
        compiledCode(){
            let self = this
            return window.hlRawcode(this.input,'c')
        }
    }
}
</script>

<style>
html,body,#app {
  margin:0;
  height:100%;
  color:#333;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 20px;
}

textarea, #app>div {
  display:inline-block;
  width:49%;
  height:auto;
  min-height:1000px;
  vertical-align:top;
  box-sizing:border-box;
  padding:0 20px;
  border:1px solid #eee;
}
div.theme-panel {
    background:#eee;
    border:1px solid #000 !important;
   min-height:10px !important;
    width:210px !important;
    position:fixed;
    top:100px;
    left:100px;
}
</style>
